import { useEffect, useState } from 'react'
import Versions from './components/Versions'

function App(): JSX.Element {
  const { ipcRenderer } = window.electron;
  const [remoteCode, setRemoteCode] = useState('')
  const [controlText, setControlText] = useState('')
  const [localCode, setLocalCode] = useState('')
  const startControl = () => {
    ipcRenderer.send('control', remoteCode)

  }
  const login = async () => {
    const code = await ipcRenderer.invoke('login')
    setLocalCode(code)
  }
  const handleControlState = (e, name, type) => {
    let text = '';
    switch (type) {
      case 1: text = `正在远程控制${name}`
      case 2: text = `被${name}远程控制中`
    }
  }
  useEffect(() => {
    login()
    ipcRenderer.on('control-state-change', handleControlState)
    return () => ipcRenderer.removeAllListeners('control-state-change')

  }, [])
  return (
    <div className="container">
      <Versions></Versions>
      {controlText ? (
        <div>{controlText}</div>
      ) : (
        <>
          <div>你的控制码{localCode}</div>
          <input type="text" value={remoteCode} onChange={(e) => setRemoteCode(e.target.value)} />
          <button onClick={startControl}>确认</button>
        </>
      )}
    </div>
  )
}

export default App
